<template>
  <jm-page class="p-12px">
    <jm-table
      max-height="90vh"
      ref="tableRef"
      :columns="PAGESET_INDEX_COLUMNS"
      :apiParams="{}"
      :hasPaginate="false"
      :isCustomWidth="false"
      rowKey="value"
      method="get"
      align="left"
      url="/dataApi/sys/roleOrMenuTreeList/menu"
    >
      <template #btns>
        <div class="flex items-center justify-end mr-10px">
          <el-button type="primary" size="small" @click="addNewMenu"
            >新增菜单</el-button
          >
        </div>
      </template>
      <template #action="{ row }">
        <div>
          <el-button
            size="small"
            type="text"
            v-if="row.menuType === 'menu'"
            @click="addNewMenu(data)"
          >
            添加菜单
          </el-button>
          <el-button
            size="small"
            type="text"
            v-if="row.menuType === 'view'"
            @click="addNewMenu(row, 'btn')"
          >
            添加按钮
          </el-button>
          <el-button type="text" @click="edit(row)"> 编辑 </el-button>
          <el-button
            type="text"
            size="small"
            style="margin-left: 8px"
            :disabled="row.children"
            @click="remove(row)"
          >
            删除
          </el-button>
        </div>
      </template>
    </jm-table>
  </jm-page>
  <AddOrEditMenu ref="addMenu" @getCurrentMenu="getCurrentMenu" />
  <AddOrEditBtn ref="addBtn" @getCurrentMenu="getCurrentMenu" />
</template>
<script setup>
import { PAGESET_INDEX_COLUMNS } from './static'
import { ElMessage, ElMessageBox } from 'element-plus'
import { ref, onMounted } from 'vue'
import { useAuthority } from '@/views/Authority/authorityCom.js'
import AddOrEditMenu from './components/addOrEditMenu.vue'
import AddOrEditBtn from './components/addOrEditBtn.vue'
import { getCurrentMenuApi } from '@/api/modules/authority.js'
import { deleteMenuApi, deleteBtnApi } from '@/api/modules/menu.js'
const modules = useAuthority()
const addMenu = ref(null)
const addBtn = ref(null)
const addNewMenu = (data, btn) => {
  if (btn === 'btn') {
    if (addBtn.value) {
      addBtn.value.dialogVisible = true
      addBtn.value.title = '新增按钮'
      addBtn.value.ruleForm.parentId = data.value
    }
    return
  }
  if (addMenu.value) {
    addMenu.value.dialogVisible = true
    addMenu.value.title = '新增菜单'
    addMenu.value.ruleForm.parentId = data.value
  }
}
const edit = data => {
  const mendata = JSON.parse(JSON.stringify(data))
  mendata.name = mendata.label
  mendata.stat = 'ENABLE'
  mendata.id = mendata.value
  delete mendata.children
  delete mendata.label
  delete mendata.value
  if (mendata.menuType === 'bottom') {
    if (addBtn.value) {
      addBtn.value.dialogVisible = true
      addBtn.value.title = '编辑按钮'
      Object.assign(addBtn.value.ruleForm, mendata)
    }
    return
  }
  if (addMenu.value) {
    addMenu.value.dialogVisible = true
    addMenu.value.title = '编辑菜单'
    Object.assign(addMenu.value.ruleForm, mendata)
  }
}
const menuDataList = ref([])
const getCurrentMenu = async () => {
  const { data } = await getCurrentMenuApi()
  menuDataList.value = data
}
const remove = node => {
  let name = '目录'
  if (node.menuType === 'menu') {
    name = '目录'
  }
  if (node.menuType === 'view') {
    name = '菜单'
  }
  if (node.menuType === 'bottom') {
    name = '按钮'
  }
  ElMessageBox.confirm(`确认要删除当前${name}吗?`, {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    // console.log(node, 11111)
    deleteMenu(remove.value)
  })
}
const deleteMenu = async id => {
  const { data } = await deleteMenuApi(id)
  getCurrentMenu()
}
const deleteBtn = async id => {
  const { data } = await deleteBtnApi(id)
  getCurrentMenu()
}

onMounted(() => {
  getCurrentMenu()
})
</script>
<style lang="scss" scoped>
.tx-r {
  text-align: right;
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>
